<!--
 * @Author: wangjian
 * @Date: 2024-07-12 14:38:19
 * 656876071@qq.com
 * @LastEditTime: 2024-07-12 14:38:19
 * @FilePath: src/views/Login.vue
 * @Description:  登录页
 -->
<script setup lang="ts">
import hooks from './LoginHooks'
import properties from './properties.json'

const {username, password, login} = hooks()


</script>

<template>
  <div class="bg">
    <div class="login">
      <a-form class="form"
              layout="vertical"
              :label-col="{ span: 4 }"
              labelAlign="left"
              @submit="login">
        <a-form-item style="text-align: center">
          <h1>{{ properties.title }}</h1>
        </a-form-item>
        <a-form-item label="用户名">
          <a-input v-model:value="username" placeholder="用户名"/>
        </a-form-item>
        <a-form-item label="密码">
          <a-input v-model:value="password" type="password" placeholder="密码"/>
        </a-form-item>
        <a-form-item style="text-align: center">
          <a-button type="primary" html-type="submit" size="large" style="width: 100%">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="copyright">
      <div>
        <span>{{ properties.copyright }}</span>
      </div>
      <div>
        <a href="https://beian.miit.gov.cn/" target="_blank">{{ properties.beian }}</a>
      </div>
    </div>
  </div>
</template>

<style scoped>
.bg {
  height: 100%;
  width: 100%;
  background-image: url("@/assets/login/login-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;

  display: flex;
  justify-content: center;
  align-items: center;
}

.login {
  width: 30rem;
  height: 25rem;
  margin-top: -3rem;
  background-color: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
}

.form {
  padding: 2rem;
}

.copyright {
  position: fixed;
  bottom: 0;
  background-color: rgba(245, 245, 245, 0.7);
  width: 100%;
  text-align: center;
  padding: .5rem;
  font-size: .5em;
  color: #666;
}

.copyright a {
  color: #666;
  text-decoration: none;
}
</style>